<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>PDF处理器-图片转PDF</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.layui-elem-field legend {
			font-size: 2em;
		}
	</style>
</head>

<body style="padding-top: 20px;">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header layui-bg-black">
			<div class="layui-logo layui-hide-xs layui-bg-black">PDF处理器</div>
			<!-- 头部区域（可配合layui 已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
			</ul>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item"><a href="/index.html">PDF转图片</a></li>
					<li class="layui-nav-item"><a href="/pdf/generatePdf.html">图片转PDF</a></li>
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<div class="layui-main" style="margin-top: 20px;">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>输入图片文件夹转PDF</legend>
				</fieldset>

				<form class="layui-form" id="generateByPathForm">
					<div class="layui-form-item">
						<label class="layui-form-label">图片目录</label>
						<div class="layui-input-block">
							<input type="text" name="path" required class="layui-input" value="D:\data\images">
						</div>
						<span class="layui-word-aux layui-input-block"> <i class="layui-icon layui-icon-about"></i>
							只能识别png,jpg,jpeg,gif,bmp格式的文件</span>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">生成PDF的名称</label>
						<div class="layui-input-block">
							<input type="text" name="name" required class="layui-input" value="output.pdf">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">缩放系数</label>
						<div class="layui-input-block">
							<input type="text" name="scaleFactor" required class="layui-input" value="1">
						</div>
						<span class="layui-word-aux layui-input-block"> <i class="layui-icon layui-icon-about"></i>
							填0.00到1.00之间的数字,1.00表示100%</span>
					</div>
					<div class="layui-form-item" style="text-align: center;">
						<button class="layui-btn" lay-submit lay-filter="generateByPathSub">处理</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<script src="/layui/layui.js"></script>
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script>
		layui.use('form', function () {
			var form = layui.form;
			form.on('submit(generateByPathSub)', function (data) {
				var marr = [
					{
						name: 'path', msg: '图片目录必填'
					},
					{
						name: 'name', msg: '生成PDF的名称必填'
					},
					{
						name: 'scaleFactor', msg: '缩放系数必填'
					},
				];
				var formData = new FormData();
				for (var i = 0; i < marr.length; i++) {
					if (data.field[marr[i].name].length == 0) {
						layer.msg(marr[i].msg);
						return false;
					}
					formData.append(marr[i].name, data.field[marr[i].name]);
				}
				get("/pdf/gen/generateByPath", formData)
				return false;
			});
		})
		function get(url, params) {
			console.log(params);
			const queryString = new URLSearchParams(params).toString();
			const fullUrl = queryString ? `${url}?${queryString}` : url;
			fetch(fullUrl, {
				method: 'GET',
				headers: {
					'Content-Type': 'application/json'
				}
			})
				.then(async response => {
					layer.msg('成功');
					return false;
				})
				.catch(error => {
					layer.msg(error);
					return false;
				});

		}		 
	</script>
</body>

</html>